<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酷我音乐</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./iconfront/iconfont.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- 头部 -->
    <header>
      <a href="#" class="collect">
        <img src="./assets/head.png" alt="" />
      </a>
      <a href="#" class="download">下载App</a>
    </header>

    <!-- 搜索 -->
    <div class="search">
      <p><span class="iconfont icon-sousuo"></span>搜索你想听的歌曲</p>
    </div>

    <!-- banner -->
    <div class="wrap">
      <img src="./assets/banner01.jpeg" alt="" />
      <img src="./assets/banner02.jpeg" alt="" />
      <img src="./assets/banner03.jpeg" alt="" />
      <!-- <div class="wrap-three"></div> -->
    </div>

    <!-- 排行榜 -->
    <div class="title">
      <h3>酷我排行榜</h3>
      <a>更多<span class="iconfont icon-right"></span></a>
    </div>
    <div class="rankcontent">
      <img src="./assets/icon_rank_hot.png" alt="" />
      <ul>
        <li class="song-title">
          酷我热歌榜 <span class="iconfont icon-right"></span>
        </li>
        <li>1.我的楼兰 - 云朵</li>
        <li>2.谁 - 洋澜一</li>
        <li>3.苹果香(黑大婶版) - 黑大婶回乡带娃</li>
      </ul>
    </div>
    <div class="rankcontent">
      <img src="./assets/icon_rank_rise.png" alt="" />
      <ul>
        <li class="song-title">
          酷我飙升榜 <span class="iconfont icon-right"></span>
        </li>
        <li>1.我的楼兰 - 云朵</li>
        <li>2.谁 - 洋澜一</li>
        <li>3.苹果香(黑大婶版) - 黑大婶回乡带娃</li>
      </ul>
    </div>
    <div class="rankcontent">
      <img src="./assets/icon_rank_new.png" alt="" />
      <ul>
        <li class="song-title">
          酷我新歌榜 <span class="iconfont icon-right"></span>
        </li>
        <li>1.我的楼兰 - 云朵</li>
        <li>2.谁 - 洋澜一</li>
        <li>3.苹果香(黑大婶版) - 黑大婶回乡带娃</li>
      </ul>
    </div>
    <!-- 推荐歌单 -->
    <div class="title">
      <h3>推荐歌单</h3>
      <a>更多<span class="iconfont icon-right"></span></a>
    </div>
    <div class="recommend">
      <ul>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song01.jpeg" alt="" />
              <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>经典老歌大放送！一人一首代表作！</p>
          </div>
        </li>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song02.jpeg" alt="" />
             <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>伤感情歌｜不眠夜里的孤单心事</p>
          </div>
        </li>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song03.jpeg" alt="" />
             <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>【经典国语】老男人的情怀老男人的歌</p>
          </div>
        </li>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song03.jpeg" alt="" />
             <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>【抖音热歌】网红热歌潮流歌曲收录站</p>
          </div>
        </li>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song02.jpeg" alt="" />
             <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>抖音流行丨网红歌曲随身听</p>
          </div>
        </li>
        <li>
          <div>
            <div class="top">
              <img src="./assets/song01.jpeg" alt="" />
             <div class="pic"><span class="iconfont icon-play"></span>1亿</div>
            </div>
            <p>【燃爆】抖音中俘虏你耳朵的英文歌曲</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom-footer">
      
    </div>
    <!-- 安装，下载 -->
    <footer>
      <img src="./assets/logo.png" alt="" />
      <p>安装酷我音乐 发现更多好音乐</p>
      <span class="iconfont icon-right"></span>
    </footer>
  </body>
</html>
